<template>
  <el-container>
    <el-aside :width="isCollapse ? '80px' : '250px'">
      <div>
        <img src="../../assets/logo.png"
             alt=""
             class="logo">
        <span v-show="isShowTitle">实验室环境安全平台</span>
      </div>
      <el-menu background-color="#3e5165"
               router
               :default-active="this.$route.path"
               :collapse="isCollapse"
               :collapse-transition="false">
        <el-menu-item index="/firstPage">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/device">
          <template slot="title">
            <i class="el-icon-s-platform"></i>
            <span>设备管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/room">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span>实验室管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/user">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>用户管理</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-main>
      <i class="el-icon-s-fold pointer"
         style="font-size: 25px"
         @click="toggleCollapse"></i>
      <el-button type="info"
                 @click="toExit">退出</el-button>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      //菜单是否折叠
      isCollapse: false,
      //是否展示标题
      isShowTitle: true
    }
  },
  methods: {
    //切换菜单的折叠与展开
    toggleCollapse () {
      this.isShowTitle = !this.isShowTitle;
      this.isCollapse = !this.isCollapse;
    },

    //退出到登录页面
    toExit () {
      window.sessionStorage.clear();
      this.$router.push('/login');
    }
  }

}
</script>

<style scoped>
.el-container {
  height: 100%;
}

.logo {
  width: 45px;
  height: 45px;
  line-height: 70px;
}

.el-aside > div {
  font-size: 18px;
  height: 70px;
  line-height: 70px;
  color: #fff;
  padding-left: 10px;
  display: flex;
  align-items: center;
}

.el-header span {
  color: #fff;
  font-size: 20px;
}

.el-aside {
  background-color: #3e5165;
}

.el-aside .el-menu {
  border-right: none;
}

.el-main {
  width: 100%;
  background-color: #f2f2f2;
}

.el-main .el-button {
  float: right;
}

.el-menu span {
  color: #fff;
  padding-left: 10px;
}
</style>